<template>
  <div>
    <p>{{ str }}</p>
    <p>{{ obj.student }}{{ obj.height }}{{ obj.other }}</p>
    <h3>{{ newObj }}</h3>
    <p>{{ newObj.other[0] }}</p>
    <button @click="sex">点击修改性别</button><br />
    <button @click="tab">{{ status ? "red" : "skyblue" }}</button>
    <Adds />
    <Filter />
    <Todolist />
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import Adds from "./components/add.vue";
import Filter from "./components/Filter.vue";
import Todolist from "./components/todolist.vue";
export default {
  setup() {
    let str = "asdfghjklaqwertyuiopiaia";
    let obj = reactive({
      student: "学生",
      height: 1.7,
      other: ["男", "打游戏", 19],
    });
    // tab切换
    let status = ref(false);
    function tab() {
      status.value = !status.value;
      console.log(status);
    }
    function sex() {
      newObj.other[0] = "女";
      console.log("已经修改");
    }
    let newObj = reactive(JSON.parse(JSON.stringify(obj)));
    console.log(newObj);
    // 去重
    let newStr = str.split("");
    let map = {};
    newStr.reduce((prev, next) => {
      return (map[next] = (map[next] || 0) + 1);
    });
    console.log(map);

    return {
      str,
      obj,
      newObj,
      sex,
      status,
      tab,
    };
  },
  components: { Adds, Filter, Todolist },
};
</script>

<style lang="scss" scoped></style>
